import React, { Component } from 'react';
import { connect } from 'dva';
import { SearchBar, Modal, Flex } from 'antd-mobile';
import HomeCarousel from '../../components/home-tabbar/home-tabber-carousel';
import Link from 'umi/link';
import router from 'umi/router';
import { fetchApi } from '@/utils/utils';
import styles from './index.less';

@connect(({ home }) => ({ home }))
class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      banner: [],
      icon: [],
      tab: [],
      bottomBanner: [],
      loinBannerList: [],
      cardLists: [],
      tofobanner: [],
      visible: false,
      classList: [],
      videoList: [
        {
          id: 29,
          title: 'Python数据分析与展示',
          type: 21,
          description:
            "“我们正步入一个数据或许比软件更重要的新时代。——Tim O'Reilly” 运用数据是精准刻画事物、呈现发展规律的主要手段，分析数据展示规律，把思想变得更精细！ ——“弹指之间·享受创新”，通过8周学习，你将掌握利用Python语言表示、清洗、统计和展示数据的能力。",
          url:
            'http://localhost:8888/myUpload/15886571207701005642049_1da2581009c54bdab39ab1f5879c8c8d_sd.mp4',
          imgUrl: 'http://localhost:8888/myUpload/485C64A7504CECA2F8FF346AC6DE1D71.jpg',
          collect: 1,
          playNumber: 40,
          createTime: 1588657120779,
          author: null,
        },
      ],
    };
  }
  componentDidMount() {
    this.getClassList();
    this.getHotVideoList();
  }
  goToClass = i => {
    console.log(i, 'iooo');
    router.push({
      pathname: '/videoList',
      query: {
        id: i.id,
        type: i.title,
      },
    });
  };
  async getHotVideoList() {
    let res = await fetchApi('web/hotVideo');
    if (res.status === 0) {
      const { list } = res.data;
      this.setState({
        videoList: list,
      });
    }
  }
  goVideoDetail = i => {
    console.log(i);
    router.push({
      pathname: '/videoDetail',
      query: {
        id: i.id,
      },
    });
  };
  async getClassList() {
    let res = await fetchApi('web/class');
    if (res.status === 0) {
      const { list } = res.data;
      this.setState({
        classList: list,
      });
    }
    console.log(res);
  }
  render() {
    const { classList, videoList } = this.state;
    const { home } = this.props;
    return (
      <div className="homePage">
        <div className="homePage_search">
          <div className="homePage_input">
            <SearchBar
              placeholder="搜索你想要的视频"
              ref={ref => (this.manualFocusInst = ref)}
              onFocus={() => router.push('/search')}
            />
          </div>
          <div className="homePage_search_ico" onClick={() => router.push('/class')}>
            <img src={require('../../assets/icon-classify.png')} />
          </div>
          {home.list.bannerList && home.list.bannerList.length !== 0 ? (
            <HomeCarousel bannerItem={home.list.bannerList} />
          ) : (
            ''
          )}
        </div>
        <div className="homePage-content-wrap">
          <div className="class-list">
            {classList.map(i => {
              return (
                <div className="class-item" onClick={() => this.goToClass(i)}>
                  <img src={i.icon} />
                  <span>{i.title}</span>
                </div>
              );
            })}
          </div>
          <div className="now-hot">
            <div className="now-hot-title">热门视频</div>
            <div className="home-video-list-wrap">
              <div className="home-video-list">
                {videoList && videoList.length > 0
                  ? videoList.map(i => {
                      return (
                        <div
                          key={i.id}
                          className="video-list-item"
                          onClick={e => this.goVideoDetail(i)}
                        >
                          <div className="item-img">
                            <img src={i.imgUrl} />
                          </div>
                          <div className="item-content">
                            <h3>{i.title}</h3>
                            <p>{i.description}</p>
                            <span className="item-playpeople">
                              <span className="iconfont icon-font-size">&#xe64b;</span>
                              {i.playNumber || 0}次观看
                            </span>
                          </div>
                        </div>
                      );
                    })
                  : '暂时还没有视频哦'}
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default Home;
